<template>
  <div class="screen-top-right2">
    <div class="screen-top-header flex-l">
      <div class="header-left flex-c">
        <!-- <el-icon color="#fff" size="20"><Calendar /></el-icon> -->
      </div>

      <div class="header-right flex-l" @click="$router.push('/datacenter/peccancy')">
        <span class="header-title"
          >本月违章查处明细报表
          <!-- <el-icon color="#fff" size="10"><ArrowRightBold /></el-icon> -->
        </span>
        <dv-decoration-3 class="dv-dec-1" />
      </div>
    </div>
    <div class="screen-top-chart">
      <dv-scroll-board class="dv-scr-board" :config="config" />
      <!-- <div class="row-item-a">
        <div class="ranking-info">
          <div class="rank"> No.1 </div> <div class="info-name">张三</div>
          <div class="ranking-value"> 90分 </div></div
        >
        <div class="ranking-column">
          <div class="inside-column" style="width: 90%"> <div class="shine"> </div> </div>
        </div>
      </div> -->
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { getCurrentMonthReportApi } from '@/api/screen'
import { ArrowRightBold, Calendar } from '@element-plus/icons-vue'
import { ElIcon } from 'element-plus'
const date = new Date()
const currentYear = date.getFullYear()
const currentMonth = date.getMonth() + 1
let config = ref<any>({
  data: [
    [
      `<div class="row-item-a"> <div class="ranking-info">
      <div class="rank"> No.1 </div> <div class="info-name">张三</div > <div class="ranking-value"> 90分 </div></div>
      <div class="ranking-column"> <div class="inside-column" style="width: 90%;"> <div class="shine" > </div>
      </div>
      </div>
    </div>`
    ],
    [
      `<div class="row-item-a"> <div class="ranking-info">
      <div class="rank"> No.1 </div> <div class="info-name">张三</div > <div class="ranking-value"> 90分 </div></div>
      <div class="ranking-column"> <div class="inside-column" style="width: 90%;"> <div class="shine" > </div>
      </div>
      </div>
    </div>`
    ],
    [
      `<div class="row-item-a"> <div class="ranking-info">
      <div class="rank"> No.1 </div> <div class="info-name">张三</div > <div class="ranking-value"> 90分 </div></div>
      <div class="ranking-column"> <div class="inside-column" style="width: 90%;"> <div class="shine" > </div>
      </div>
      </div>
    </div>`
    ],
    [
      `<div class="row-item-a"> <div class="ranking-info">
      <div class="rank"> No.1 </div> <div class="info-name">张三</div > <div class="ranking-value"> 90分 </div></div>
      <div class="ranking-column"> <div class="inside-column" style="width: 90%;"> <div class="shine" > </div>
      </div>
      </div>
    </div>`
    ],
    [
      `<div class="row-item-a"> <div class="ranking-info">
      <div class="rank"> No.2 </div> <div class="info-name">李四</div > <div class="ranking-value"> 59分 </div></div>
      <div class="ranking-column column-fail"> <div class="inside-column fail" style="width: 59%;"> <div class="shine shine-fail" > </div>
      </div>
      </div>
    </div>`
    ],
    [
      `<div class="row-item-a"> <div class="ranking-info">
      <div class="rank"> No.1 </div> <div class="info-name">张三</div > <div class="ranking-value"> 90分 </div></div>
      <div class="ranking-column"> <div class="inside-column" style="width: 90%;"> <div class="shine" > </div>
      </div>
      </div>
    </div>`
    ]
  ]
})

// const config = reactive({
//   header: ['违章班组', '文件名', '上传时间'],
//   intervalInstance: 0,
//   data: [],
//   indexHeader: '',
//   rowNum: 7, //表格行数
//   headerHeight: 35,
//   headerBGC: '#1370fb00', //表头
//   oddRowBGC: '#0f132500', //奇数行
//   evenRowBGC: '#1370fb5500', //偶数行
//   index: true,
//   // columnWidth: [50, 90, 280, 180], //50,
//   columnWidth: [50],
//   align: ['center']
// })
// const getCurrentMonthReport = async () => {
//   const res = await getCurrentMonthReportApi({ year: currentYear, month: currentMonth })

//   if (res) {
//     let list = res.data

//     config.data = list.map((item) => {
//       return [item.depName, item.fileName, item.collectTime]
//     })
//   }
// }
// getCurrentMonthReport()
</script>

<style lang="scss" scoped>
@import '/src/assets/scss/common/variables.scss';
.flex-l {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
}
.screen-top-right2 {
  height: $box-height5 - 5px;
  // width: $box-width5;
  // background-color: $theme-sub-color;
  margin: 10px 10px;
  border-radius: 20px;

  .screen-top-header {
    height: $chart-header-height;

    .header-left {
      // width: 30px;
      width: 10px;
    }

    .header-right {
      width: calc(100% - 30px);

      .header-title {
        color: #fff;
        font-size: $base-font-size;
        cursor: pointer;
      }

      .dv-dec-1 {
        width: 50px;
        height: 20px;
        margin-left: 10px;
      }
    }
  }

  .screen-top-chart {
    .dv-scr-board {
      // width: 470px;
      height: 340px;
    }
  }
}
</style>
<style lang="scss" scoped>
::v-deep(.row-item) {
  transition: all 0.3s;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: none !important;
}

::v-deep(.row-item-a) {
  transition: all 0.3s;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  justify-content: space-between;
}

::v-deep(.ranking-info) {
  display: flex;
  width: 100%;
  height: 80%;
  font-size: 13px;
}
::v-deep(.info-name) {
  flex: 1;
}
::v-deep(.ranking-value) {
  font-size: 13px;
}
::v-deep(.rank) {
  width: 40px;
  color: #cdd0d6;
}
::v-deep(.dv-scroll-board .rows .ceil) {
  padding: 0;
  color: #cdd0d6;
}
::v-deep(.ranking-column) {
  border-bottom: 2px solid rgba(19, 112, 251, 0.5);
  margin-top: -0.8rem;
}
::v-deep(.column-fail) {
  border-bottom: 2px solid rgba(239, 100, 23, 0.5);
}
::v-deep(.inside-column) {
  width: 100%;
  position: relative;
  height: 6px;
  background-color: #1370fb;
  margin-bottom: 2px;
  border-radius: 1px;
  overflow: hidden;
}
::v-deep(.fail) {
  background-color: #ef6417;
}
::v-deep(.shine) {
  position: absolute;
  left: 0;
  top: 2px;
  height: 2px;
  width: 20px;
  transform: translateX(-100%);
  background: radial-gradient(#28f8ff 5%, transparent 80%);
  animation: shine 3s ease-in-out infinite alternate;
}
::v-deep(.shine-fail) {
  background: radial-gradient(#ef6417 5%, transparent 80%);
}
</style>
